// import React from "react";
// import Header from "./include/header";
// import Bottom from "./include/bottom";
// import "../css/main.css";
// class App extends React.Component{
//     constructor(props) {
//         super(props);
//
//         this.state = {
//             name: "奈克瑟斯奥特曼",
//             age: 0,
//             sex: "男",
//             num: 0,
//             aoteman:["盖亚","戴拿"],
//             person:{
//                 name:"Tiga",
//                 color:"复合形态",
//                 weight:39,
//             },
//             Ultraman:[
//                 {
//                     name:"tiga",
//                     age:"10万年",
//                     high:"40m",
//                 },
//                 {
//                     name:"orb",
//                     age:"9万年",
//                     high:"39m",
//                 }
//             ]
//
//         }
//
//     }
//     render() {
//         return (
//             <div className={"mainApp"}>
//                  <Header num={this.state.num}/>
//                  <div className={"middle"}>
//                      你好，我的名字叫：{this.state.name}，{this.state.age}岁，性别是{this.state.sex}，工作是Ultraman<br/>
//                      我的名字的字符长度是：{"奈克瑟斯".length}<br/>
//                      我的名字的第二个字是：{"奈克瑟斯".charAt(1)}<br/>
//                      现在时间：{60 * 60}<br/>
//                      我直接变身！<br/>
//                      奈克瑟斯<br/>
//                     <img src={require("../asset/nss.png").default} height = {400}/><br/>
//                      <button onClick={
//                          event => {
//                              this.setState({
//                                  num: this.state.num-1,
//                                  age: this.state.age-1
//                              })
//                          }
//                      }>-</button>
//                      &nbsp;&nbsp;<span>{this.state.num}</span> &nbsp;&nbsp;
//                      <button onClick={
//                          event => {
//                              this.setState({
//                                  num: this.state.num+1,
//                                  age: this.state.age+1
//                              })
//                          }
//                      }>+</button>
//                      &nbsp;&nbsp;
//                      num是{this.state.num % 2 == 0 ? "偶数" : "奇数"}<br/>
//                      {this.state.aoteman.join(" * ")}<br/>
//                      <button onClick={
//                          event => {
//                              let aoteman = this.state.aoteman;
//                              aoteman.push("宇宙第一束光-诺亚！");
//                              console.log(aoteman);
//                              this.setState({
//                                  aoteman
//                              })
//                          }
//                      }>出现一个奥特曼</button>
//                      <button onClick={
//                          event => {
//                              let aoteman = this.state.aoteman;
//                              let index = aoteman.indexOf("盖亚");
//                              console.log(index);
//                              if (index > -1) {
//                                  aoteman.splice(index, 1);
//                                  console.log(aoteman);
//                                  this.setState({aoteman});
//                              } else {
//                                  alert("未找到飞走的奥特曼");
//                              }
//                          }
//                      }>飞走一个奥特曼</button><br/>
//                      {this.state.person.name} 颜色是：{this.state.person.color} 重量是：{this.state.person.weight} T<br/>
//                      <button onClick={
//                          event => {
//                              let person = this.state.person;
//                              person.color = "红色强力形态";
//                              person.weight = 40;
//                              console.log(person);
//                              this.setState({person})
//                          }
//                      }>改变形态</button><br/>
//                  </div>
//                  <Bottom/>
//             </div>
//         )
//     }
// }
// export default App;
import React from "react";
import Header from "./include/header";
import Bottom from "./include/bottom";
import {Swiper} from "antd-mobile";

/*
首页
 */
class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            goodses:[
                {
                    image:"/static/media/image/1.jpg",
                    title:"冰淇淋",
                    price: 20,
                    sellNum: 40
                },
                {
                    image:"/static/media/image/2.jpg",
                    title:"鸡腿",
                    price: 15.3,
                    sellNum: 50
                },
                {
                    image:"/static/media/image/3.jpg",
                    title:"薯条",
                    price: 15,
                    sellNum: 80
                },
                {
                    image:"/static/media/image/4.jpg",
                    title:"汉堡个儿",
                    price: 21.5,
                    sellNum: 20
                },
                {
                    image:"/static/media/image/5.jpg",
                    title:"烧烤串儿",
                    price: 50,
                    sellNum: 90
                },
            ]
        }

    }

    render() {
        return (
            <div className={"mainApp"}>
                <Header/>
                <div className={"middle"}>
                    <Swiper autoplay className={"banner"}>
                        <Swiper.Item key={1}>
                            <img src={require("../asset/image/banner/1.jpg").default} alt={""}/>
                        </Swiper.Item>
                        <Swiper.Item key={2}>
                            <img src={require("../asset/image/banner/2.jpg").default} alt={""}/>
                        </Swiper.Item>
                        <Swiper.Item key={3}>
                            <img src={require("../asset/image/banner/3.jpg").default} alt={""}/>
                        </Swiper.Item>
                    </Swiper>
                    <div className={"goodsDiv"}>
                        {this.state.goodses.map((goods,index)=>
                            <div className={"goodsItem"} key={index}>
                                <img src={goods.image} alt={""}/>
                                <span>
                                    <span className={"title"}>{goods.title}</span><br/><br/>
                                    <span className={"price"}>￥{goods.price.toFixed(2)}</span>
                                    <br/><br/>
                                    <span className={"sellNum"}>销量：{goods.sellNum} / 月</span>
                                </span>
                            </div>
                        )}
                    </div>
                </div>
                <Bottom history={this.props.history}/>
            </div>
        )
    }

}

export default App;
